<template>
  <div class="customer">
    <div class="visited_info">
      <div class="visited_header">
        <span>拜访</span>
      </div>
      <div class="line"></div>
      <div class="detail">
        <div class="doctor_info">
          <div class="doctor_avtar">
            <div class="phone_status" v-if="is_link === true">
              <span>通话中...</span>
            </div>
            <div class="avatar">
              <span>{{avatar.substr(0,1)}}</span>
            </div>
          </div>
          <div class="specific_info">
            <div class="doctor_name">
              <span v-if="!doctor_info">当前代表下无该医生</span>
              <span v-if="doctor_info">{{doctor_info.doctorName}}</span>
              <img src="../../assets/common/man.svg" alt="" v-if="doctor_info && doctor_info.gender === '男'">
              <img src="../../assets/common/woman.svg" alt="" v-if="doctor_info && doctor_info.gender === '女'">
            </div>
            <div class="address">
              <span v-if="doctor_info">{{doctor_info.hospitalName}}</span>
            </div>
            <div class="unknow_info" v-if="!doctor_info">
              <span>未知</span>
            </div>
            <div class="promit" v-if="doctor_info">
              <span>提示</span>
              <span>医生倾向于通过电话沟通，很少使用微信。</span>
            </div>
          </div>
        </div>
        <div class="record">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <div class="basic_info" v-if="doctor_info">
                <div class="doctor_info doctor_name">
                  <span>医生姓名：</span>
                  <span>{{doctor_info.doctorName}}</span>
                </div>
                <div class="doctor_info doctor_sex">
                  <span>医生性别：</span>
                  <span>{{doctor_info.gender}}</span>
                </div>
                <div class="doctor_info doctor_age">
                  <span>医生年龄：</span>
                  <span>{{doctor_info.age}}</span>
                </div>
                <div class="doctor_info hosiptal_address">
                  <span>所属医院：</span>
                  <span>{{doctor_info.hospitalName}}</span>
                  <!-- <span>三级甲等</span> -->
                </div>
                <div class="doctor_info department">
                  <span>医生所在科室：</span>
                  <span>{{doctor_info.depart}}</span>
                </div>
                <div class="doctor_info doctor_position">
                  <span>职务：</span>
                  <span>{{doctor_info.executeTitle}}</span>
                </div>
                <div class="doctor_info tech_title">
                  <span>技术职称：</span>
                  <span>{{doctor_info.techTitle}}</span>
                </div>
                <div class="doctor_info academic_title">
                  <span>学术职称：</span>
                  <span>{{doctor_info.academicTitle ? doctor_info.academicTitle : '无'}}</span>
                </div>
                <div class="doctor_info bed_number">
                  <span>管理床位数：</span>
                  <div class="text" v-if="is_bed_number">
                    <el-input
                      v-model="bed_number"
                      ref="bed_number">
                    </el-input>
                  </div>
                  <span v-else>{{doctor_info.beds}}</span>
                  <span class="update" v-if="!is_bed_number" @click="change_bed(doctor_info.beds)">编辑</span>
                  <span class="add" v-if="is_bed_number" @click="update_bed_number">保存</span>
                </div>
                <div class="doctor_info patients_number">
                  <span>每周门诊患者数量：</span>
                  <div class="text" v-if="is_patients_number">
                    <el-input
                      v-model="patients_number"
                      ref="patients_number">
                    </el-input>
                  </div>
                  <span v-else>{{doctor_info.weeklyPatients}}</span>
                  <span class="update" v-if="!is_patients_number" @click="change_patients(doctor_info.weeklyPatients)">编辑</span>
                  <span class="add" v-if="is_patients_number" @click="update_patient_number">保存</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="产品信息" name="second" class="production">
              <div class="basic_info" v-if="doctor_product.length">
                <div class="doctor_info product_name">
                  <span>产品线名称：</span>
                  <el-select
                    v-model="selected_product_name"
                    placeholder="请选择"
                    v-if="is_multiple_product"
                    @change="changeProductInfo">
                    <el-option
                      v-for="item in selected_production"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <span v-else>{{doctor_product[0].name}}</span>
                </div>
                <div>
                  <div class="doctor_info doctor_sex">
                    <span>英文名：</span>
                    <span>{{doctor_product_info.enName}}</span>
                  </div>
                  <div class="doctor_info doctor_position">
                    <span>备注：</span>
                    <span>{{doctor_product_info.memo}}</span>
                  </div>
                  <div class="doctor_info department">
                    <span>产品关键词：</span>
                    <span>{{doctor_product_info.pkeyWord}}</span>
                  </div>
                  <div class="doctor_info doctor_name">
                    <span>竞品关键词：</span>
                    <span>{{doctor_product_info.ckeyWord}}</span>
                  </div>
                  <div class="doctor_info doctor_age">
                    <span>药企：</span>
                    <span>{{doctor_product_info.enterpriseName}}</span>
                  </div>
                  <div class="doctor_info department">
                    <span>项目名称：</span>
                    <span>{{doctor_product_info.projectName}}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="微信聊天记录" name="four">
              <div class="wechat_rept" v-if="wechat_rept_info.length">
                <span class="name">微信代表:</span>
                <el-select
                  v-model="wechat_rept_name"
                  placeholder="请选择微信代表"
                  filterable
                  clearable
                  @change="getWechatTalkInfo(wechat_rept_name)"
                  v-if="is_multiple_wechat_rept">
                  <el-option
                    v-for="item in wechat_rept_info"
                    :key="item.repId"
                    :label="item.name"
                    :value="item.repId">
                  </el-option>
                </el-select>
                <span v-else>{{wechat_rept_user}}</span>
              </div>
              <div class="wx_chat_record" v-if="wechat_info && wechat_info.length">
                <div class="up">
                  <img v-if="wechat_info.is_up" src="../../assets/image/up.png" alt="" @click="get_next_page_info">
                  <!-- <div @click="get_up_page_info">
                    <img src="../../assets/image/up.png" alt="" @click="get_next_page_info">
                    <span>{{wechat_page.up_page_count}}条消息</span>
                  </div> -->
                </div>
                <div class="content">
                  <div
                    :class="{main:item.is_doctor === false ? false : true,main_right:item.is_doctor === true ? false : true}"
                    v-for="item in wechat_info" :key="item.id">
                    <div class="talk_content" v-if="item.is_doctor === true">
                      <span class="user_name">{{item.user_name | subName}}</span>
                      <span
                        :class="{talk:true,talk_flex:item.msgContent && item.msgContent.length >= 30 ? true : false,talk_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,talk_link:item.msgType === 'link' ? true : false,talk_audio:item.msgType === 'voice' ? true : false}">

                        <!-- 文字 -->
                        <span v-if="item.msgType === 'text'">{{item.msgContent.content}}</span>
                        <!-- 图片，表情 -->
                        <el-image
                          v-if="item.msgType === 'image' || item.msgType === 'emotion'"
                          :src="item.msgContent.content"
                          fit="cover"
                          :preview-src-list="item.srcList"></el-image>
                        <!-- 音频 -->
                        <div v-if="item.msgType === 'voice'" class="audio" @click="changePlay($event,item)">
                          <audio
                            ref="audio"
                            :src="item.msgContent.content"
                            @loadedmetadata="onLoadedMetaData($event,item)"
                            @timeupdate="onTimeUpdate($event,item)"
                          ></audio>
                          <div class="cricleplay">
                            <div class="small"></div>
                            <div :class="{middle:true,stopanimate:item.audio_play == false ? true : false}"></div>
                            <div :class="{large:true,stopanimate:item.audio_play == false ? true : false}"></div>
                          </div>
                          <div class="audio_duration">{{parseInt(item.audio_duration)}}</div>
                        </div>
                        <!-- 视频 -->
                        <video
                          v-if="item.msgType === 'video'"
                          :src="item.msgContent.content"
                          controls
                          width="300" height="150"
                          style="object-fit: cover"
                        />
                        <!-- 链接 -->
                        <el-link
                          v-if="item.msgType === 'link'"
                          :href="item.msgContent.link_url"
                          target="_blank"
                          :underline="false">
                          <h4>{{item.msgContent.title}}</h4>
                          <div class="description">
                            <div>{{item.msgContent.description}}</div>
                            <img :src="item.msgContent.image_url"/>
                          </div>
                        </el-link>



                      </span>
                    </div>
                    <div class="talk_content_right" v-if="item.is_doctor === false">
                      <span
                        :class="{talk_right:true,talk_flex:item.msgContent && item.msgContent.length >= 30 ? true : false,talk_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,talk_link:item.msgType === 'link' ? true : false,talk_audio:item.msgType === 'voice' ? true : false}">


                        <!-- 文字 -->
                        <span v-if="item.msgType === 'text'">{{item.msgContent.content}}</span>
                        <!-- 图片，表情 -->
                        <el-image
                          v-if="item.msgType === 'image' || item.msgType === 'emotion'"
                          :src="item.msgContent.content"
                          fit="cover"
                          :preview-src-list="item.srcList"></el-image>
                        <!-- 音频 -->
                        <div v-if="item.msgType === 'voice'" class="audio" @click="changePlay($event,item)">
                          <audio
                            ref="audio"
                            :src="item.msgContent.content"
                            @loadedmetadata="onLoadedMetaData($event,item)"
                            @timeupdate="onTimeUpdate($event,item)"
                          ></audio>
                          <div class="cricleplay">
                            <div class="small"></div>
                            <div :class="{middle:true,stopanimate:item.audio_play === false ? true : false}"></div>
                            <div :class="{large:true,stopanimate:item.audio_play === false ? true : false}"></div>
                          </div>
                          <div class="audio_duration">{{parseInt(item.audio_duration)}}</div>
                        </div>
                        <!-- 视频 -->
                        <video
                          v-if="item.msgType === 'video'"
                          :src="item.msgContent.content"
                          controls
                          width="300" height="150"
                          style="object-fit: cover"
                        />
                        <!-- 链接 -->
                        <el-link
                          v-if="item.msgType === 'link'"
                          :href="item.msgContent.link_url"
                          target="_blank"
                          :underline="false">
                          <h4>{{item.msgContent.title}}</h4>
                          <div class="description">
                            <div>{{item.msgContent.description}}</div>
                            <img :src="item.msgContent.image_url"/>
                          </div>
                        </el-link>



                      </span>
                      <span class="user_name_right">{{item.user_name | subName}}</span>
                    </div>
                    <div
                      :class="{talk_time:item.is_doctor === false ? false : true,talk_time_right:item.is_doctor === true ? false : true}">
                      {{item.msgTime}}
                    </div>
                  </div>
                </div>
                <!-- v-if="wechat_info.is_down" -->
                <div class="down">
                  <!-- <div>
                    <img src="../../assets/image/down.png" alt="" @click="get_next_page_info">
                  </div> -->
                </div>
              </div>
              <div v-if="!wechat_info.length" style="font-size:14px;">
                <span>暂无微信聊天记录</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="微信拜访结果" name="third">
              <div class="wechat_result_info" v-if="wechat_result_info.length">
                <div class="wechat_result" v-for="item in wechat_result_info" :key="item.id">
                  <div class="communicate_result">
                    <span>沟通内容：</span>
                    <span>{{item.communicateResult}}</span>
                  </div>
                  <div class="operation_time">
                    <span>填报时间：</span>
                    <span>{{item.operationTime}}</span>
                  </div>
                </div>
              </div>
              <div class="wechat_result_info" v-else>
                <span>暂无微信拜访结果</span>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="add_visited">
      <div class="visited_header">
        <span>拜访结果</span>
      </div>
      <div class="line"></div>
      <div class="add_visited_info">
        <div class="visited_info1">
          <!-- <div class="add_visited_purpose">
            <el-button type="primary" @click="add_visit_purse">添加</el-button>
            <el-button type="primary" @click="delete_visit_purse(index)">删除</el-button>
          </div> -->
          <div class="visited_result">
            <div class="visit visited_purpose">
              <span class="visited_mandatory_logo">*</span>
              <span>拜访目的：</span>
              <el-select
                v-model="visited_purpose"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择"
                filterable
                value-key="id">
                <el-option
                  v-for="item in visitPurpose"
                  :key="item.id"
                  :label="item.purposeVal"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="visit result">
              <span class="visited_mandatory_logo">*</span>
              <span>拜访结果：</span>
              <el-select
                v-model="visited_result"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择"
                filterable
                value-key="id">
                <el-option
                  v-for="item in visitResult"
                  :key="item.id"
                  :label="item.resultVal"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="visit result">
              <span class="visited_mandatory_logo">*</span>
              <span>拜访次数：</span>
              <el-select
                v-model="visited_number"
                style="margin-left: 20px;"
                placeholder="请选择"
                filterable
                value-key="id">
                <el-option
                  v-for="item in visitNumber"
                  :key="item.id"
                  :label="item.visitVal"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="visit visited_tag">
              <span class="visited_text">医生标签：</span>
              <el-select
                v-model="visited_tag"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择"
                filterable
                value-key="id">
                <el-option
                  v-for="item in visitTag"
                  :key="item.id"
                  :label="item.tagVal"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="visit doctor_level">
              <span class="visited_text">医生等级：</span>
              <el-select
                v-model="doctorLevel"
                style="margin-left: 20px;"
                placeholder="请选择"
                filterable
                value-key="id"
                clearable>
                <el-option
                  v-for="item in doctor_level"
                  :key="item.id"
                  :label="item.levelVal"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="call">
        <div class="visited_header">
          <span>本次通话</span>
        </div>
        <div class="line"></div>
        <div class="call_info">
          <div class="call_desc">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>通话状态描述：</span>
            <el-select
              v-model="callDesc"
              style="margin-left: 20px;"
              placeholder="请选择"
              clearable>
              <el-option
                v-for="item in call_desc"
                :key="item.id"
                :label="item.descVal"
                :value="item.descVal">
              </el-option>
            </el-select>
          </div>
          <div class="product">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>产品：</span>
            <el-select
              v-model="production"
              style="margin-left: 20px;"
              placeholder="请选择"
              clearable>
              <el-option
                v-for="item in products"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <!-- <div class="is_drug">
            <span class="visited_mandatory_logo">*</span>
            <span class="is_drug_label">是否有药：</span>
            <el-radio v-model="drugs" label="1">是</el-radio>
            <el-radio v-model="drugs" label="0">否</el-radio>
            <el-radio v-model="drugs" label="-1">未知</el-radio>
          </div> -->
          <!-- <div class="objective_doctor">
            <span class="visited_mandatory_logo">*</span>
            <span class="objective_doctor_label">目标医生：</span>
            <el-radio v-model="objective_doctor" label="1">是</el-radio>
            <el-radio v-model="objective_doctor" label="0">否</el-radio>
            <el-radio v-model="objective_doctor" label="-1">未知</el-radio>
          </div> -->
          <div class="with_ae">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span class="with_ae_label">是否有AE：</span>
            <el-radio v-model="withAe" label="1">是</el-radio>
            <el-radio v-model="withAe" label="0">否</el-radio>
            <el-radio v-model="withAe" label="-1">未知</el-radio>
          </div>
          <div class="lost">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span class="lost_label">是否脱落：</span>
            <el-radio v-model="lost" label="1">是</el-radio>
            <el-radio v-model="lost" label="0">否</el-radio>
            <el-radio v-model="lost" label="-1">未知</el-radio>
          </div>
          <div class="doctor_attitude">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>医生态度：</span>
            <el-rate v-model="attitude"></el-rate>
          </div>
          <div class="bed_number">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>每周门诊患者数量：</span>
            <el-input v-model="beds_num" placeholder="请输入内容"></el-input>
          </div>
          <div class="patients_number">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>管理床位数：</span>
            <el-input v-model="patients_num" placeholder="请输入内容"></el-input>
          </div>
          <div class="visited_time">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span class="demonstration">下次拜访时间：</span>
            <el-date-picker
              v-model="next_call_time"
              type="datetime"
              placeholder="选择日期时间"
              :picker-options="expireTimeOption">
            </el-date-picker>
          </div>
          <div class="cancer_number">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>每月管理多少癌症患者：</span>
            <el-input v-model="cancer_number" placeholder="请输入内容"></el-input>
          </div>
          <div class="cancer_type">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>主要接诊哪些癌种的患者：</span>
            <el-select
              v-model="cancer_type"
              style="margin-left: 20px;"
              placeholder="请选择"
              filterable
              value-key="id"
              clearable
              multiple
              collapse-tags>
              <el-option
                v-for="item in cancerType"
                :key="item.id"
                :label="item.typeVal"
                :value="item.typeVal">
              </el-option>
            </el-select>
          </div>
          <div class="is_application">
            <!-- <span class="visited_mandatory_logo">*</span> -->
            <span>放化疗、靶向、免疫治疗方案您是否都应用：</span>
            <!-- <el-input v-model="is_application"></el-input> -->
            <el-select
              v-model="is_application"
              style="margin-left: 20px;"
              placeholder="请选择"
              filterable
              value-key="id"
              clearable
              multiple
              collapse-tags>
              <el-option
                v-for="item in isApplication"
                :key="item.id"
                :label="item.appVal"
                :value="item.appVal">
              </el-option>
            </el-select>
          </div>
          <div class="cancer_one">
            <span>癌种1治疗方案：</span>
            <el-input v-model="cancer_one" placeholder="请输入内容"></el-input>
            <!-- <el-select
              v-model="cancer_one"
              style="margin-left: 20px;"
              placeholder="请选择"
              filterable
              value-key="id"
              clearable
              multiple
              collapse-tags>
              <el-option
                v-for="item in cancerOne"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select> -->
          </div>
          <div class="cancer_two">
            <span>癌种2治疗方案：</span>
            <el-input v-model="cancer_two" placeholder="请输入内容"></el-input>
          </div>
          <div class="cancer_three">
            <span>癌种3治疗方案：</span>
            <el-input v-model="cancer_three" placeholder="请输入内容"></el-input>
          </div>
          <div class="use_product">
            <span>使用产品名：</span>
            <el-input v-model="use_product" placeholder="请输入内容"></el-input>
          </div>
          <div class="pd_proportion">
            <span>各PD1使用比例：</span>
            <el-input v-model="pd_proportion" placeholder="请输入内容"></el-input>
          </div>
          <div class="use_proportion">
            <span>使用PD1的患者比例：</span>
            <el-input v-model="use_proportion" placeholder="请输入内容"></el-input>
          </div>
          <div class="hospital_use_product">
            <span>医院在用的有哪些产品：</span>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="hospital_use_product">
            </el-input>
          </div>
          <div class="not_pd_reason">
            <span>不使用PD1的原因：</span>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="not_pd_reason">
            </el-input>
          </div>
          <div class="not_profit_reason">
            <span>不用拓益的原因：</span>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="not_profit_reason">
            </el-input>
          </div>
          <div class="remark">
            <span>备注：</span>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              maxlength="200"
              show-word-limit
              v-model="remark">
            </el-input>
          </div>
        </div>
      </div>
      <div class="mandatory_promit">
        <span>全文带"</span>
        <span class="visited_mandatory_logo">*</span>
        <span>"为必填</span>
      </div>
      <div class="success_recruiting">
        <el-checkbox v-model="checked">成功招募</el-checkbox>
      </div>
      <div class="visited_submit">
        <el-button v-if="is_add_info" type="primary" @click="add_visited_info($store.state.calls.supplement)">保存
        </el-button>
        <el-button v-else class="disabled_submit" type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {api, baseAjax} from '../../api/api';
  import Cookies from 'js-cookie';
  import {statusCode} from '../../utils/index';
  import {formatDate} from '../../utils/validate';

  export default {
    computed: {
      ...mapState({
        'selected_visited_purpose': state => state.calls.selected_visited_purpose,  //选中的拜访目的
        'sinToken': state => state.calls.sinToken,
        'doctorId': state => state.calls.doctorId,
        'selected_product_id': state => state.calls.selected_product_id,
        'is_link': state => state.calls.is_link  //是否是正在通话中
      })
    },
    data() {
      return {
        activeName: 'first',
        visitPurpose: [{   //拜访目的
          id: '1',
          purposeVal: '招募医生'
        }, {
          id: '2',
          purposeVal: '分型：了解医生信息'
        }, {
          id: '3',
          purposeVal: '传递：影响医生观念'
        }, {
          id: '4',
          purposeVal: '处方：向医生推荐用药'
        }, {
          id: '5',
          purposeVal: '客情'
        }, {
          id: '6',
          purposeVal: '收病例'
        }, {
          id: '7',
          purposeVal: '医生召回'
        }, {
          id: '8',
          purposeVal: '活动邀请'
        }, {
          id: '9',
          purposeVal: '活动回访'
        }, {
          id: '10',
          purposeVal: '其他'
        }],
        visitResult: [   //拜访结果
          {
            id: '1',
            resultVal: '非联系人'
          }, {
            id: '2',
            resultVal: '非目标医生'
          }, {
            id: '3',
            resultVal: '退出项目'
          }, {
            id: '4',
            resultVal: '稍后致电'
          }, {
            id: '5',
            resultVal: '医生拒绝'
          }, {
            id: '6',
            resultVal: '招募成功'
          }, {
            id: '7',
            resultVal: '活动邀请'
          }, {
            id: '8',
            resultVal: '活动回访'
          }, {
            id: '9',
            resultVal: '信息探寻'
          }, {
            id: '10',
            resultVal: '观念传递'
          }, {
            id: '11',
            resultVal: '落实处方'
          }, {
            id: '12',
            resultVal: '达成目的'
          }
        ],
        visitTag: [
          {
            id: '1',
            tagVal: '需会议回访'
          }, {
            id: '2',
            tagVal: '新转入医生'
          }, {
            id: '3',
            tagVal: '超过10天未拜访'
          }, {
            id: '4',
            tagVal: '阅读过文章但未拜访'
          }, {
            id: '5',
            tagVal: '今日需拜访'
          }, {
            id: '6',
            tagVal: '最后一次未接触'
          }
        ],
        doctor_level: [   //医生等级
          {
            id: '-1',
            levelVal: '未知'
          },
          {
            id: '0',
            levelVal: '已经上传了患者的医生'
          },
          {
            id: '1',
            levelVal: '现在手里有患者的医生'
          },
          {
            id: '2',
            levelVal: '现在手里没有患者但是态度积极的医生'
          },
          {
            id: '3',
            levelVal: '加了微信的医生'
          },
          {
            id: '4',
            levelVal: '有意向加入但是没有加微信的医生'
          },
          {
            id: '5',
            levelVal: '异常情况'
          }
        ],
        call_desc: [   //通话状态描述
          {
            id: '1',
            descVal: '医生不配合'
          },
          {
            id: '2',
            descVal: '中途挂断'
          },
          {
            id: '3',
            descVal: '正常沟通'
          },
          {
            id: '4',
            descVal: '错误电话'
          }
        ],
        visitNumber: [  //拜访次数
          {
            id: '1',
            visitVal: '首次覆盖'
          },
          {
            id: '2',
            visitVal: '二次跟进'
          },
          {
            id: '3',
            visitVal: '循例跟进'
          }
        ],
        cancerType: [   //主要接诊哪些癌种的患者
          {
            id: '1',
            typeVal: '肺癌'
          },
          {
            id: '2',
            typeVal: '胃癌'
          },
          {
            id: '3',
            typeVal: '肝癌'
          },
          {
            id: '4',
            typeVal: '结肠/直肠癌'
          },
          {
            id: '5',
            typeVal: '食管癌'
          },
          {
            id: '6',
            typeVal: '膀胱癌'
          },
          {
            id: '7',
            typeVal: '胰腺癌'
          },
          {
            id: '8',
            typeVal: '白血病'
          },
          {
            id: '9',
            typeVal: '淋巴瘤'
          },
          {
            id: '10',
            typeVal: '脑肿瘤'
          },
          {
            id: '11',
            typeVal: '乳腺癌'
          },
          {
            id: '12',
            typeVal: '卵巢癌'
          },
          {
            id: '13',
            typeVal: '子宫癌'
          }
        ],
        isApplication: [   //放化疗、靶向、免疫治疗方案您是否都应用
          {
            id: '1',
            appVal: '放化疗'
          },
          {
            id: '2',
            appVal: '靶向'
          },
          {
            id: '3',
            appVal: '免疫治疗'
          }
        ],
        // cancerOne:[
        //   {
        //     id:'1',
        //     name:'abc'
        //   },
        //   {
        //     id:'2',
        //     name:'def'
        //   },
        //   {
        //     id:'3',
        //     name:'hij'
        //   }
        // ],
        visited_purpose: [],   //选中拜访目的
        visited_result: [],  //选中拜访结果
        visited_tag: [],   //选中的医生标签
        doctorLevel: '',  //选中的医生等级
        visited_number: '',  //拜访次数
        products: [],   //产品
        remark: '',  //备注
        // drugs:'',   //是否有药
        production: '',  //产品
        // objective_doctor:'',  //目标医生
        withAe: '',  //是否有AE
        lost: '',   //是否脱落
        attitude: 0,  //医生态度
        callDesc: '',  //通话状态描述
        next_call_time: '',  //下次拜访时间
        checked: false,  //是否被成功招募
        user_info: [],
        is_product_all: false,   //是否显示产品全部选项
        doctor_info: {},  //医生基本信息
        doctor_product: [],  //医生对应的产品信息
        doctor_product_info: {},
        role_id: [],  //角色id
        is_add_info: true,  //保存按钮是否可点击
        wechat_info: [],  //微信聊天记录信息
        wechat_page_info: [],  //微信聊天记录每页信息
        expireTimeOption: {  //设置不能选当前日期之前的日期
          disabledDate(date) {
            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
          },
          selectableRange: ['09:00:00 - 18:00:00']
        },
        avatar: '',   //头像
        wechat_page: {   //微信聊天记录页码
          current_page: 1,   //当前页
          total_pages: 0,   //总页数
          count: 0,   //总条数
          page_size: 0,   //每页显示条数
          up_page_count: 0   //当前页之前的总条数
        },
        is_bed_number: false,    //管理床位数是否可修改
        is_patients_number: false,   //每周门诊患者量是否可修改
        bed_number: '',   //管理床位数
        patients_number: '',   //每周患者数量
        cancer_number: '',  //每月管理多少癌症患者
        cancer_type: '',  //主要接诊哪些癌种的患者
        is_application: '',  //放化疗、靶向、免疫治疗方案您是否都应用
        is_multiple_product: false,   //产品是否有多个
        selected_product_name: '',   //默认选中的产品线名称
        selected_production: [],   //产品线名称
        beds_num: '',   //添加的患者量
        patients_num: '',   //添加的床位数
        // is_bed_add:true,   //床位是否修改
        // is_patients_add:true,  //患者量是否修改
        wechat_result_info: [],   //微信拜访结果
        cancer_one:'',  //癌种1治疗方案
        cancer_two:'',  //癌种2治疗方案
        cancer_three:'',  //癌种3治疗方案
        use_product:'',  //使用产品名
        pd_proportion:'',  //各PD1使用比例
        use_proportion:'',   //使用PD1的患者比例
        hospital_use_product:'',   //医院在用的有哪些产品
        not_pd_reason:'',   //不使用PD1的原因
        not_profit_reason:'',   //不用拓益的原因
        wechat_rept_info:[],   //微信代表
        wechat_rept_name:'',   //选中的微信代表id
        wechat_rept_user:'',   //选中的微信代表名字
        is_multiple_wechat_rept:false,  //是否有多个微信代表
        audio_duration: null,
        audio_play: false,
        audio_currentTime: null
      }
    },
    mounted() {
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      let that = this;
      // let selected_visited_purpose = ['1', '2'];
      this.visited_purpose = this.selected_visited_purpose ? this.selected_visited_purpose : [];
      this.production = this.selected_product_id ? this.selected_product_id : '';
      this.getProduction();  //获取产品信息（本次通话）
      this.getDoctorInfo();  //获取医生基本信息
      this.getDoctorProduct();   //获取医生对应产品信息
      // this.getWechatTalkInfo();//获取微信代表与医生聊天信息
      this.getWechatResult();//获取微信拜访结果
      this.getWechatRept();  //获取微信代表
    },
    methods: {
      //添加拜访目的
      // add_visit_purse(){
      //   if(this.addVisitedInfo.length >= 5){
      //     this.$alert('最多只能增加五条拜访信息', {
      //       dangerouslyUseHTMLString: true
      //     });
      //   }else{
      //     this.addVisitedInfo.push({
      //       visited_purpose:[],   //选中拜访目的
      //       visited_result:[],   //选中拜访结果
      //       visited_tag:[]    //选中的tag
      //     });
      //   }
      // },
      //删除拜访目的
      // delete_visit_purse(index){
      //   if(this.addVisitedInfo.length === 1){
      //     this.$alert('已经是最后一条拜访目的了，不能再删了！', {
      //       dangerouslyUseHTMLString: true
      //     });
      //   }else{
      //     this.addVisitedInfo.splice(index, 1);
      //   }
      // },
      //添加拜访信息
      add_visited_info(isSupplement) {
        let that = this;
        let formatPurpose = [];   //处理后的拜访目的
        let productName = '';
        let productId = '';
        let productIdUpdate = '';
        this.visited_purpose.forEach(item => {
          that.visitPurpose.forEach(ke => {
            if (ke.id === item) {
              formatPurpose.push(ke);
            }
          });
        });
        if (!this.visited_purpose.length) {
          this.$alert('拜访目的不能为空');
        } else if (!this.visited_result.length) {
          this.$alert('拜访结果不能为空');
        } else if (!this.visited_number) {
          this.$alert('拜访次数不能为空')
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && !this.production) {
          this.$alert('产品不能为空');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && !this.withAe) {
          this.$alert('是否有AE必选');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && !this.lost) {
          this.$alert('是否脱落必选');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && !this.attitude) {
          this.$alert('医生态度必选');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && !this.beds_num) {
          this.$alert('每周门诊患者数量不能为空');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && isNaN(this.beds_num)) {
          this.$alert('每周门诊患者数量只能为数字');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && !this.patients_num) {
          this.$alert('管理床位数不能为空');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && isNaN(this.patients_num)) {
          this.$alert('管理床位数只能为数字');
        } else if (!this.callDesc) {
          this.$alert('通话状态描述不能为空');
        } else if ((this.callDesc === this.call_desc[0].descVal || this.callDesc === this.call_desc[2].descVal) && !this.next_call_time) {
          this.$alert('下次拜访时间不能为空');
        } else {
          this.products.forEach(item => {
            if (this.production == item.id) {
              productName = item.name;
            }
          });
          this.user_info.role.forEach(item => {
            this.role_id.push('' + item.roleId);
          });
          if (this.selected_product_id) {
            if (this.production !== this.selected_product_id) {
              productId = this.selected_product_id;
              productName = '';
              productIdUpdate = this.production;
            } else {
              productId = this.production;
              productIdUpdate = '';
            }
          } else {
            productId = '0';
            productName = '';
            productIdUpdate = this.production;
          }
          let data = {
            attitude: '' + this.attitude,
            callRecordPurpose: formatPurpose,
            callRecordResult: this.visited_result,
            callRecordTag: this.visited_tag,
            // callType:''+this.user_info.type,
            dotcorId: this.doctorId ? this.doctorId : '0',
            isLost: '',
            isRecruit: this.checked === false ? '0' : '1',
            // isTarget:this.objective_doctor,
            memo: this.remark,
            nextCallTime: this.next_call_time ? formatDate(this.next_call_time) : '',
            potential: '',
            productId: '' + productId,
            productIdUpdate: '' + productIdUpdate,
            productName: productName,
            repId: '' + this.user_info.repId,
            sinToken: this.sinToken,
            // withDrug:this.drugs,
            roleList: this.role_id,
            clientGrade: this.doctorLevel,
            callStatusDesc: this.callDesc,
            withAe: this.withAe,
            isLost: this.lost,
            beds: this.beds_num,
            weeklyPatients: this.patients_num,
            visitsNumber: this.visited_number,
            monthlyCancerPatients: this.cancer_number,
            cancerPatientsTypeJson: this.cancer_type,
            chemoradiotherapyTargetedImmunotherapyJson: this.is_application,
            cancerTreatmentOne: this.cancer_one,
            cancerTreatmentTwo: this.cancer_two,
            cancerTreatmentThree: this.cancer_three,
            useProductName: this.use_product,
            eachRoportionPD1: this.pd_proportion,
            patientsProportionPD1: this.use_proportion,
            hospitalUseProduct: this.hospital_use_product,
            notUsingReasonsPD1: this.not_pd_reason,
            notUsingReasonsTuoyi: this.not_profit_reason
          };
          console.log(data)
          if (isSupplement) {
            this.supplement_post(data)
          } else {
            this.add_visited_record_post(data)
          }
        }
      },
      //电话代表接通请求
      add_visited_record_post(data) {
        baseAjax(api.add_visited_record, data, (res) => {
          if (res.code === statusCode.success) {
            this.$store.state.calls.sinToken = '';
            this.$alert('保存成功', {
              dangerouslyUseHTMLString: true
            }).then(res => {
              if (res === 'confirm') {
                this.is_add_info = false;
                this.$router.push('/my_customer');
              }
            });
          }
        });
      },
      //拜访补填请求
      supplement_post(data) {
        baseAjax(api.supplement, data, (res) => {
          if (res.code === statusCode.success) {
            this.$store.state.calls.sinToken = '';
            this.$alert('保存成功', {
              dangerouslyUseHTMLString: true
            }).then(res => {
              if (res === 'confirm') {
                this.is_add_info = false;
                this.$router.push('/my_customer');
              }
            });
          }
        });
      },
      //获取产品信息（本次通话）
      getProduction() {
        let that = this;
        baseAjax(api.product, '', (res) => {
          if (res.code === statusCode.success) {
            that.products = res.data;
            that.is_product_all = that.products ? true : false;
          }
        })
      },
      //获取医生基本信息
      getDoctorInfo() {
        let that = this;
        api.doctor_info = {
          url: api.doctor_info_url + '?' + 'doctorId' + '=' + Number(this.doctorId),
          method: api.doctor_info.method
        };
        baseAjax(api.doctor_info, '', (res) => {
          if (res.code === statusCode.success) {
            that.doctor_info = res.data;
            that.avatar = that.doctor_info ? that.doctor_info.doctorName : '';
          } else if (res.code === statusCode.not_login) {
            that.$alert('用户未登录,请重新登录').then(() => {
              that.$store.dispatch('user/resetToken').then(() => {
                location.reload()  // 为了重新实例化vue-router对象 避免bug
              })
              that.$router.replace('/login');
            });
          }
        })
      },
      //获取医生对应产品信息
      getDoctorProduct() {
        let that = this;
        api.doctor_product = {
          url: api.doctor_product_url + '?' + 'repId' + '=' + this.user_info.repId + '&' + 'doctorId' + '=' + Number(this.doctorId),
          method: api.doctor_product.method
        };
        baseAjax(api.doctor_product, '', (res) => {
          if (res.code === statusCode.success) {
            let {data} = res;
            that.doctor_product = data.length ? data : [];
            that.doctor_product_info = data.length ? data[0] : [];
            //产品名称
            that.doctor_product.forEach(item => {
              that.selected_production.push({
                id: item.id,
                name: item.name
              });
            });
            that.selected_product_name = that.selected_production[0].id;
            if (that.selected_production.length > 1) {
              that.is_multiple_product = true;
            } else {
              that.is_multiple_product = false;
            }
          }
        })
      },
      //获取微信代表与医生聊天信息
      getWechatTalkInfo(wechat_rept_id) {
        this.wechat_info = [];
        let that = this;
        if (wechat_rept_id) {
          this.wechat_rept_info.forEach(rept => {
            if (wechat_rept_id === rept.repId) {
              that.wechat_rept_user = rept.name;
            }
          });
        }
        api.get_wechat_talk_info = {
          url: api.get_wechat_talk_info_url + '?repId=' + this.wechat_rept_name + '&doctroId=' + this.doctorId + '&wechatType=corp&page=' + this.wechat_page.current_page,
          method: api.get_wechat_talk_info.method
        }
        baseAjax(api.get_wechat_talk_info, '', (res) => {
          if (res.code === statusCode.success) {
            if (res.data) {
              let {wechatMsg, remark, repWechatId, currentPage, totalMsg, totalPages} = res.data;
              that.wechat_page_info = wechatMsg ? wechatMsg : [];
              that.wechat_page_info.forEach(item => {
                item.msgContent = JSON.parse(item.msgContent);
                if (item.msgType === 'image') {
                  item.srcList = [
                    item.msgContent.content
                  ];
                }
                item.user_name = item.from === repWechatId ? that.wechat_rept_user : this.avatar;
                item.is_doctor = item.from === repWechatId ? false : true;
                item.audio_duration = null;
                item.audio_play = false;
                item.audio_currentTime = null;
              });
              that.wechat_page.current_page = currentPage;
              that.wechat_page.total_pages = totalPages;
              that.wechat_page.count = totalMsg;
              that.wechat_page.page_size = that.wechat_page_info.length;
              if (that.wechat_page.current_page > 1 && that.wechat_page.current_page !== that.wechat_page.total_pages) {
                that.wechat_page.up_page_count = that.wechat_page.page_size * (that.wechat_page.current_page - 1);
              } else {
                that.wechat_page.up_page_count = that.wechat_page.count - that.wechat_page.page_size;
              }
              that.wechat_info.unshift(that.wechat_page_info.reverse());
              that.wechat_info = that.wechat_info.flat();
              let num = -1;
              that.wechat_info.forEach(val=>{
                if(val.msgType === 'voice'){
                  num = num + 1;
                  val.voice_num = num;
                }
              });

              //判断当前页是否等于总页数(是否展示下一页操作按钮)
              // that.wechat_info.is_down = that.wechat_page.current_page === that.wechat_page.total_pages ? false : true;
              //判断当前页是否等于第一页(是否展示上一页操作按钮)
              that.wechat_info.is_up = that.wechat_page.current_page === that.wechat_page.total_pages ? false : true;
            }
          }
        })
      },
      //获取微信聊天记录上一页数据
      get_up_page_info() {
        this.wechat_page.current_page = this.wechat_page.current_page === 1 ? 1 : this.wechat_page.current_page - 1;
        this.getWechatTalkInfo(null);
      },
      //获取微信聊天记录下一页数据
      get_next_page_info() {
        this.wechat_page.current_page = this.wechat_page.current_page === this.wechat_page.total_pages ? this.wechat_page.total_pages : this.wechat_page.current_page + 1;
        this.getWechatTalkInfo(null);
      },
      //编辑床位数
      change_bed(beds) {
        this.is_bed_number = true;
        this.bed_number = beds;
      },
      //修改床位数
      update_bed_number() {
        this.is_bed_number = false;
        if (isNaN(this.bed_number) === true) {
          this.$alert('管理床位只能为数字');
        } else {
          let data = 'doctorId=' + this.doctorId + '&repId=' + this.user_info.repId + '&productId=' + this.selected_product_id + '&beds=' + this.bed_number;
          this.updateDoctorInfo(data);
        }
      },
      //编辑患者数量
      change_patients(patients) {
        this.is_patients_number = true;
        this.patients_number = patients;
      },
      //修改患者数量
      update_patient_number() {
        this.is_patients_number = false;
        if (isNaN(this.patients_number)) {
          this.$alert('每周门诊患者数量只能为数字');
        } else {
          let data = 'doctorId=' + this.doctorId + '&repId=' + this.user_info.repId + '&productId=' + this.selected_product_id + '&weeklyPatients=' + this.patients_number;
          this.updateDoctorInfo(data);
        }
      },
      //根据医生id修改医生信息
      updateDoctorInfo(data) {
        let that = this;
        api.update_doctor_info = {
          url: api.update_doctor_info_url + '?' + data,
          method: api.update_doctor_info.method
        }
        baseAjax(api.update_doctor_info, '', (res) => {
          if (res.code === statusCode.success) {
            that.getDoctorInfo();
          }
        });
      },
      //根据产品id获取产品信息
      changeProductInfo(id) {
        let that = this;
        this.doctor_product.forEach(item => {
          if (id === item.id) {
            that.doctor_product_info = item;
          }
        });
      },
      //获取微信拜访结果
      getWechatResult() {
        let that = this;
        api.get_wechat_result = {
          url: api.get_wechat_result_url + '?doctorId=' + this.doctorId,
          method: api.get_wechat_result.method
        }
        baseAjax(api.get_wechat_result, '', (res) => {
          if (res.code === statusCode.success) {
            that.wechat_result_info = res.data;
          }
        });
      },
      //获取微信代表
      getWechatRept() {
        let that = this;
        api.get_wechat_rept = {
          url: api.get_wechat_rept_url + this.doctorId,
          method: api.get_wechat_rept.method
        }
        baseAjax(api.get_wechat_rept, '', (res) => {
          if (res.code === statusCode.success) {
            that.wechat_rept_info = res.data;
            if (that.wechat_rept_info.length > 1) {
              that.is_multiple_wechat_rept = true;
            } else if (that.wechat_rept_info.length === 1) {
              that.wechat_rept_name = that.wechat_rept_info[0].repId;
              that.wechat_rept_user = that.wechat_rept_info[0].name;
            } else {
              that.is_multiple_wechat_rept = false;
            }
            that.getWechatTalkInfo(null);
          }
        });
      },
      //录音总时长
      onLoadedMetaData(val,item) {
        item.audio_duration = val.target.duration;
        this.$set(item)
      },
      //改变播放按钮
      changePlay(val,item) {
        let that = this;
        if (item.audio_play === false) {
          item.audio_play = true;
          this.audioPlay(item.voice_num);
        } else if(item.audio_play === true) {
          item.audio_play = false;
          this.audioPause(item.voice_num);
        }
        this.$forceUpdate();
        this.$set(that.wechat_info,item)
      },
      //播放录音
      audioPlay(voice_num) {
        let val = this.$refs.audio;
        val[voice_num].play();
      },
      //暂停录音
      audioPause(voice_num) {
        let val = this.$refs.audio;
        val[voice_num].pause();
      },
      //更新当前播放时间
      onTimeUpdate(val,item) {
        let that = this;
        item.audio_currentTime = val.target.currentTime;
        if(item.audio_play === false){
          item.audio_play = false;
        }else if(item.audio_play === true){
          item.audio_play = item.audio_currentTime === item.audio_duration ? false : true;
        }
        this.$forceUpdate();
        this.$set(that.wechat_info,item)
      }
    }
  }
</script>

<style lang="less" scoped>
  .customer {
    display: flex;

    .visited_info, .add_visited {
      width: 48%;
      background-color: #F8F9FB;
      border-radius: 5px;
      padding-top: 16px;
      padding-bottom: 13px;
      box-sizing: border-box;

      .visited_header {
        margin-bottom: 14px;

        span {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #2B3A4F;
          margin-left: 15px;
          margin-bottom: 14px;
        }
      }

      .line {
        display: block;
        width: 100%;
        height: 1px;
        background-color: rgba(43, 58, 79, 0.06);
        margin-bottom: 20px;
      }
    }

    .visited_info {
      margin-right: 20px;

      .detail {
        padding-left: 14px;
        padding-right: 15px;
        box-sizing: border-box;

        .doctor_info {
          display: flex;
          margin-bottom: 35px;

          .doctor_avtar {
            position: relative;

            .phone_status {
              width: 100%;
              height: 22px;
              background-color: #EB464F;
              opacity: 0.43;
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              // line-height: 22px;
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              // top:28%;
              top: 38%;
              // margin-top:-50%;
            }

            .avatar {
              height: 82px;
              width: 82px;
              color: #000;
              background-color: #C0C4CC;
              box-sizing: border-box;
              text-align: center;
              border-radius: 4px;
              font-size: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 300;
            }
          }

          .specific_info {
            margin-left: 22px;

            div {
              margin-bottom: 12px;
            }

            .doctor_name {
              display: flex;
              align-items: center;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #2B3A4F;

              span {
                margin-right: 7px;
              }

              img {
                width: 12px;
                height: 12px;
              }
            }

            .address {
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2B3A4F;
            }

            .unknow_info {
              width: 35px;
              height: 18px;
              background-color: #FFA940;
              border-radius: 2px;
              font-size: 11px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .promit {
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2B3A4F;

              span:first-child {
                color: #409EFF;
                margin-right: 7px;
              }

              span:last-child {
                color: rgba(137, 152, 172, 1);
              }
            }
          }
        }

        .record {
          /deep/ .el-tabs {
            .el-tabs__header {
              margin-bottom: 19px;

              .el-tabs__nav-wrap {
                .el-tabs__nav-scroll {
                  .el-tabs__nav {
                    .el-tabs__active-bar {
                      background-color: rgba(59, 124, 255, 1);
                    }

                    .el-tabs__item.is-active {
                      color: rgba(59, 124, 255, 1);
                    }

                    .el-tabs__item:hover {
                      color: rgba(59, 124, 255, 1);
                    }
                  }
                }
              }

              .el-tabs__nav-wrap::after {
                background-color: transparent;
              }
            }

            .el-tabs__content {
              .el-tab-pane {
                .basic_info {
                  min-width: 38vw;
                  background-color: rgba(255, 255, 255, 1);
                  border-radius: 5px;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #2B3A4F;
                  line-height: 20px;
                  padding: 25px 0 1px 25px;

                  .doctor_info {
                    margin-bottom: 38px;
                  }

                  .hosiptal_address {
                    display: flex;
                    align-items: center;
                    // span:last-child{
                    //   display:flex;
                    //   justify-content:center;
                    //   align-items:center;
                    //   width:65px;
                    //   height:18px;
                    //   background-color:#409EFF;
                    //   font-size:13px;
                    //   color:#FFF;
                    //   border-radius:10px;
                    //   margin-left:7px;
                    // }
                  }

                  .product_name {
                    display: flex;
                    align-items: center;

                    .el-select {
                      .el-input {
                        input {
                          height: 30px;
                        }

                        .el-input__suffix {
                          .el-input__suffix-inner {
                            .el-input__icon {
                              line-height: 30px;
                            }
                          }
                        }
                      }
                    }
                  }

                  .bed_number, .patients_number {
                    display: flex;

                    .text {
                      display: flex;
                      width: 15%;

                      .el-input {
                        margin-top: -3px;

                        input {
                          height: 25px;
                          line-height: 25px;
                          border-top: 0;
                          border-left: 0;
                          border-right: 0;
                          border-radius: 0;
                          padding: 0;
                          text-align: center;
                        }
                      }

                    }

                    .update, .add {
                      color: #409EFF;
                      cursor: pointer;
                      margin-left: 13px;
                    }
                  }
                }

                ul, li {
                  list-style: none;
                }

                .visited_record {
                  .record_info {
                    width: 50vw;
                    height: 131px;
                    background-color: #FFFFFF;
                    border-radius: 5px;
                    margin-bottom: 13px;
                    border-radius: 5px;

                    .name_time {
                      height: 44px;
                      display: flex;
                      align-items: center;
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;

                      span:first-child {
                        margin-left: 12px;
                        margin-right: 8px;
                        color: #2B3A4F;
                      }

                      span:last-child {
                        color: #8998ac;
                      }
                    }

                    .record_line {
                      width: 50vw;
                      height: 1px;
                      background-color: rgba(43, 58, 79, 0.06);
                    }

                    .visited_record_info {
                      width: 42.5vw;
                      height: 66%;
                      padding-left: 12px;
                      box-sizing: border-box;
                      display: flex;
                      flex-direction: column;
                      padding-top: 16px;
                      padding-right: 12px;

                      .info1 {
                        margin-left: 12px;
                        display: flex;

                        div:first-child {
                          margin-right: 164px;
                        }
                      }

                      .info1:first-child {
                        margin-bottom: 15px;
                      }

                      .info1:last-child {
                        div:first-child {
                          margin-right: 169px;
                        }
                      }
                    }
                  }
                }

                .wechat_rept {
                  margin-bottom: 20px;
                  font-size: 14px;

                  .name {
                    padding-right: 10px;
                  }

                  /deep/ .el-select {
                    .el-input {
                      .el-input__inner {
                        height: 33px;
                        width: 154px;
                      }

                      .el-input__suffix {
                        .el-input__suffix-inner {
                          .el-input__icon {
                            line-height: 33px;
                          }
                        }
                      }
                    }
                  }
                }

                .wx_chat_record {
                  width: 100%;
                  height: 393px;
                  background-color: #FFFFFF;
                  position: relative;
                  display: flex;
                  flex-direction: column;

                  .up {
                    height: 5%;
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;

                    div {
                      width: 143px;
                      height: 40px;
                      border-radius: 25px;
                      border: 1px solid #E6EDFE;
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #3B4859;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      cursor: pointer;

                      img {
                        margin-right: 12px;
                      }
                    }
                  }

                  .content {
                    padding: 8px 10px 0px 10px;
                    overflow: auto;
                    height: 91%;
                    // box-sizing:border-box;
                    .main {
                      margin-bottom: 12px;

                      .talk_content {
                        display: flex;
                        align-items: center;

                        .user_name {
                          display: inline-flex;
                          justify-content: center;
                          align-items: center;
                          width: 40px;
                          height: 40px;
                          background-color: #3B7CFF;
                          border-radius: 50%;
                          font-size: 17px;
                          font-family: PingFangSC-Semibold, PingFang SC;
                          font-weight: 500;
                          color: #FFFFFF;
                          margin-right: 12px;
                        }

                        .talk {
                          display: inline-flex;
                          align-items: center;
                          background-color: #FFFFFF;
                          border-radius: 8px;
                          padding: 10px 16px 10px 16px;
                          border: 1px solid #E6EDFE;
                          box-sizing: border-box;
                          font-size: 14px;
                          font-family: PingFangSC-Regular, PingFang SC;
                          font-weight: 400;
                          color: #2B3A4F;
                          position: relative;

                          .el-link.el-link--default:hover {
                            color: #606266;
                          }

                          .audio {
                            display: flex;
                            align-items: center;
                            transform: translateX(-20px);

                            .small {
                              width: 20px;
                              height: 14px;
                              border-style: solid;
                              border-top-color: transparent;
                              border-left-color: transparent;
                              border-bottom-color: transparent;
                              border-radius: 50%;
                              box-sizing: border-box;
                              vertical-align: middle;
                              display: inline-block;
                              color: #A2A2A2;
                            }

                            .middle {
                              width: 30px;
                              height: 24px;
                              border-style: solid;
                              border-top-color: transparent;
                              border-left-color: transparent;
                              border-bottom-color: transparent;
                              border-radius: 50%;
                              box-sizing: border-box;
                              vertical-align: middle;
                              display: inline-block;
                              margin-left: -22px;
                              animation: show2 3s ease-in-out infinite;
                              opacity: 1;
                              color: #A2A2A2;
                            }

                            @keyframes show2 {
                              0% {
                                opacity: 0;
                              }
                              30% {
                                opacity: 1;
                              }
                              100% {
                                opacity: 0;
                              }
                            }

                            .cricleplay {
                              width: 100%;
                              margin-right: 23px;
                            }

                            .large {
                              width: 40px;
                              height: 34px;
                              border-style: solid;
                              border-top-color: transparent;
                              border-left-color: transparent;
                              border-bottom-color: transparent;
                              border-top-color: transparent;
                              border-radius: 50%;
                              box-sizing: border-box;
                              vertical-align: middle;
                              display: inline-block;
                              margin-left: -32px;
                              animation: show3 3s ease-in-out infinite;
                              opacity: 1;
                              color: #A2A2A2;
                            }

                            @keyframes show3 {
                              0% {
                                opacity: 0;
                              }
                              60% {
                                opacity: 1;
                              }
                              100% {
                                opacity: 0;
                              }
                            }

                            .stopanimate {
                              animation-name: none;
                            }
                          }
                        }

                        .talk::before {
                          content: "";
                          width: 0px;
                          height: 0px;
                          border-top: 8px solid transparent;
                          border-left: 30px solid transparent;
                          border-right: 8px solid #E6EDFE;
                          border-bottom: 8px solid transparent;
                          position: absolute;
                          left: -38px;
                        }

                        .talk::after {
                          content: "";
                          width: 0px;
                          height: 0px;
                          border-top: 8px solid transparent;
                          border-left: 30px solid transparent;
                          border-right: 8px solid #FFFFFF;
                          border-bottom: 8px solid transparent;
                          position: absolute;
                          left: -37px;
                        }
                      }

                      .talk_time {
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #8998AC;
                        margin-left: 53px;
                        margin-top: 4px;
                      }
                    }

                    .main_right {
                      margin-bottom: 12px;
                      display: flex;
                      flex-direction: column;

                      .talk_content_right {
                        align-self: flex-end;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;

                        .user_name_right {
                          display: inline-flex;
                          justify-content: center;
                          align-items: center;
                          width: 40px;
                          height: 40px;
                          background-color: #27DAAD;
                          border-radius: 50%;
                          font-size: 17px;
                          font-family: PingFangSC-Semibold, PingFang SC;
                          font-weight: 500;
                          color: #FFFFFF;
                          margin-left: 12px;
                        }

                        .talk_right {
                          display: inline-flex;
                          align-items: center;
                          background-color: #E6EDFE;
                          border-radius: 8px;
                          padding: 10px 16px 10px 16px;
                          border: 1px solid #E6EDFE;
                          box-sizing: border-box;
                          font-size: 14px;
                          font-family: PingFangSC-Regular, PingFang SC;
                          font-weight: 400;
                          color: #2B3A4F;
                          position: relative;

                          .el-link.el-link--default:hover {
                            color: #606266;
                          }

                          .audio {
                            display: flex;
                            align-items: center;
                            transform: translateX(-20px);

                            .small {
                              width: 20px;
                              height: 14px;
                              border-style: solid;
                              border-top-color: transparent;
                              border-left-color: transparent;
                              border-bottom-color: transparent;
                              border-radius: 50%;
                              box-sizing: border-box;
                              vertical-align: middle;
                              display: inline-block;
                              color: #A2A2A2;
                            }

                            .middle {
                              width: 30px;
                              height: 24px;
                              border-style: solid;
                              border-top-color: transparent;
                              border-left-color: transparent;
                              border-bottom-color: transparent;
                              border-radius: 50%;
                              box-sizing: border-box;
                              vertical-align: middle;
                              display: inline-block;
                              margin-left: -22px;
                              animation: show2 3s ease-in-out infinite;
                              opacity: 1;
                              color: #A2A2A2;
                            }

                            @keyframes show2 {
                              0% {
                                opacity: 0;
                              }
                              30% {
                                opacity: 1;
                              }
                              100% {
                                opacity: 0;
                              }
                            }

                            .cricleplay {
                              width: 100%;
                              margin-right: 23px;
                            }

                            .large {
                              width: 40px;
                              height: 34px;
                              border-style: solid;
                              border-top-color: transparent;
                              border-left-color: transparent;
                              border-bottom-color: transparent;
                              border-top-color: transparent;
                              border-radius: 50%;
                              box-sizing: border-box;
                              vertical-align: middle;
                              display: inline-block;
                              margin-left: -32px;
                              animation: show3 3s ease-in-out infinite;
                              opacity: 1;
                              color: #A2A2A2;
                            }

                            @keyframes show3 {
                              0% {
                                opacity: 0;
                              }
                              60% {
                                opacity: 1;
                              }
                              100% {
                                opacity: 0;
                              }
                            }

                            .stopanimate {
                              animation-name: none;
                            }
                          }
                        }

                        .talk_right::before {
                          content: "";
                          width: 0px;
                          height: 0px;
                          border-top: 8px solid transparent;
                          border-left: 8px solid #E6EDFE;
                          border-right: 8px solid transparent;
                          border-bottom: 8px solid transparent;
                          position: absolute;
                          right: -16px;
                        }
                      }

                      .talk_time_right {
                        align-self: flex-end;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #8998AC;
                        margin-right: 53px;
                        margin-top: 4px;
                      }
                    }

                    .talk_flex {
                      flex: 1;
                    }

                    .talk_image {
                      width: 20%;
                      height: 20%;

                      .el-image-viewer__wrapper {
                        .el-image-viewer__close {
                          color: #fff;
                        }
                      }
                    }

                    .talk_link {
                      width: 230px;

                      .el-link {
                        width: 100%;

                        .el-link--inner {
                          width: 100%;

                          h4 {
                            margin-top: 0;
                            margin-bottom: 13px;
                            font-size: 14px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                          }

                          .description {
                            display: flex;

                            div {
                              width: 142px;
                              height: 40px;
                              margin-right: 10px;
                              font-size: 12px;
                              color: #a5a5a5;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              -webkit-line-clamp: 3;
                            }

                            img {
                              width: 42px;
                              height: 42px;
                            }
                          }
                        }
                      }
                    }

                    .talk_audio {
                      height: 37px;
                      cursor: pointer;
                    }
                  }

                  .down {
                    width: 100%;
                    position: absolute;
                    bottom: 11px;

                    div {
                      display: flex;
                      justify-content: center;
                      align-items: center;

                      img {
                        cursor: pointer;
                      }
                    }
                  }
                }

                .wechat_result_info {
                  height: 930px;
                  overflow: auto;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #2B3A4F;

                  .wechat_result {
                    line-height: 20px;
                    margin-bottom: 13px;
                    background-color: #FFFFFF;
                    border-radius: 5px;
                    padding: 10px 0 10px 10px;
                    box-sizing: border-box;

                    .communicate_result {
                      margin-bottom: 7px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .add_visited {
      .add_visited_info {
        position: relative;
        box-sizing: border-box;
        overflow: auto;
        margin-bottom: 30px;

        .visited_info1 {
          .add_visited_purpose {
            position: absolute;
            right: 12px;
            display: flex;

            .el-button {
              width: 53px;
              height: 36px;
              background-color: #409EFF;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .visited_result {
            padding-left: 12px;
            padding-right: 12px;
            box-sizing: border-box;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 20px;
            margin-bottom: 30px;

            .visit {
              margin-bottom: 16px;

              .visited_text {
                margin-left: 6px;
              }
            }

            div {
              /deep/ .el-select {
                .el-input {
                  input {
                    width: 224px;
                    height: 36px;
                  }

                  .el-input__suffix {
                    .el-input__suffix-inner {
                      .el-input__icon {
                        line-height: 36px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .call {
        .call_info {
          padding-left: 12px;
          padding-right: 12px;
          box-sizing: border-box;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2B3A4F;
          height: 415px;
          overflow: auto;
          margin-bottom: 10px;

          .product {
            margin-bottom: 18px;

            /deep/ .el-select {
              margin-left: 86px !important;

              .el-input {
                input {
                  width: 180px;
                  height: 36px;
                }

                .el-input__suffix {
                  .el-input__suffix-inner {
                    .el-input__icon {
                      line-height: 36px;
                    }
                  }
                }
              }
            }
          }

          .with_ae {
            margin-bottom: 30px;

            .with_ae_label {
              margin-right: 50px;
            }
          }

          .lost {
            margin-bottom: 30px;

            .lost_label {
              margin-right: 54px;
            }
          }

          .doctor_attitude {
            display: flex;
            margin-bottom: 20px;

            .el-rate {
              margin-left: 54px;
            }
          }

          .bed_number, .patients_number, .cancer_number {
            display: flex;
            align-items: center;

            /deep/ .el-input {
              width: 0;

              input {
                width: 100px;
              }
            }
          }

          .patients_number {
            margin: 20px 0 20px 0;

            .el-input {
              margin-left: 43px;
            }
          }

          .cancer_type {
            margin: 20px 0 20px 0;
          }

          .is_application {
            margin: 20px 0 20px 0;

            /deep/ .el-select {
              .el-input {
                input {
                  width: 179px;
                }
              }
            }
          }

          .call_desc {
            margin-bottom: 20px;

            .el-select {
              margin-left: 29px !important;
            }
          }

          .visited_time {
            margin-bottom: 14px;

            .demonstration {
              margin-right: 30px;
            }
          }

          .remark {
            display: flex;
            margin-bottom: 17px;

            /deep/ .el-textarea {
              width: 72%;
              margin-left: 12px;

              textarea {
                resize: none;
              }
            }
          }

          .cancer_one, .cancer_two, .cancer_three, .use_product, .pd_proportion, .use_proportion, .hospital_use_product, .not_pd_reason, .not_profit_reason {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
          }

          .cancer_one, .cancer_two, .cancer_three, .use_product, .pd_proportion, .use_proportion {
            /deep/ .el-input {
              width: 0;

              .el-input__inner {
                width: 200px;
              }
            }
          }

          .hospital_use_product, .not_pd_reason, .not_profit_reason {
            /deep/ .el-textarea {
              width: 60%;

              .el-textarea__inner {
                resize: none;
              }
            }
          }
        }

        .call_info::-webkit-scrollbar {
          display: none;
        }
      }

      .mandatory_promit {
        margin-left: 12px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8998ac;
        margin-bottom: 14px;
      }

      .success_recruiting {
        margin-left: 519px;
        margin-bottom: 20px;
        position: relative;

        /deep/ .el-checkbox {
          position: absolute;
          right: 60px;
        }
      }

      .visited_submit {
        width: 100%;
        display: flex;
        justify-content: center;

        .el-button {
          background-color: #409EFF;
        }

        .disabled_submit {
          background-color: #c8c9cc;
          border-color: #c8c9cc;
          cursor: default;
        }
      }

    }

    .visited_mandatory_logo {
      color: rgba(255, 169, 64, 1);
    }
  }
</style>
